<template>
	<view class="set-shopp">
		<!-- 店铺列表    滑动删除            添加店铺 ===>   绑定地区,绑定用户,编辑店铺 -->


		<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.index"
			@click="click(item.id)" @open="open" :options="options">
			<view class="item u-border-bottom" @tap="textInfo(item, init)">
				<image mode="aspectFill" :src="'http://three.qianjiwl.xyz' + item.avatar" />
				<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
				<view class="title-wrap">
					<text class="title u-line-2">{{item.xiangz_name}}</text>
					<text class="title u-line-2">拥有店铺者ID {{ item.id }}</text>
				</view>
			</view>
		</u-swipe-action>

		<view class="add" @tap="addProp">
			添加
		</view>

		<u-popup v-model="show1" mode="bottom" height="1060rpx" border-radius="30">
			<view class="" style="margin: 650rpx auto 0;">
				<area-select :disableLinkage="false" v-model="selected" :data="$pcaa" :level="3" type="all"
					@change="changeText"></area-select>
				<view class="" style="margin: 20rpx 20rpx;">
					<view class="" style="margin-top: 10rpx;border: 1rpx solid #EEEEEE;">
						<input type="text" v-model="userId" placeholder="请输入用户ID" @blur="blurInput" />
					</view>
					<view class="" style="margin-top: 10rpx;border: 1rpx solid #EEEEEE;">
						<input type="text" v-model="titlName" placeholder="请输入店铺昵称" @blur="blurName" />
					</view>
				</view>
			</view>

			<view class="foot_box1" @tap="addText">
				确定
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				show1: false,
				page: 1,
				selected: [],
				valText: '',
				xiangzhen_id: '',
				titlName: '',
				userId: '',
				init: 1, // 添加
				shoppId: '',
				total:''
			};
		},
		onLoad() {
			this.getAddressInfo()
		},
		onReachBottom() {
			if (this.total <= this.list.length  ) {
				this.page++
				this.getAddressInfo()
			}
			
		},
		methods: {

			// 修改
			textInfo(item) {
				console.log(item)
				this.show1 = true
				this.shoppId = item.id
				this.userId = item.user_id
				this.titlName = item.dianpu_name
				this.init = 2
			},

			click(index, index1) {
				console.log(index, index1)
				this.$api('user.del', {
					id: index
				}).then(res => {
					if (res.code === 1) {
						this.getAddressInfo()
						this.$tools.toast(res.msg)
					}
				});
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效 /pages/user/set-shopp
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			// 地址信息
			getAddressInfo() {
				this.$api('user.dianpuliebiao', {
					page: this.page
				}).then(res => {
					if (res.code === 1) {
						this.list = [...this.list,...res.data.data]
						this.total = res.data.total
					}
				});
			},


			changeText(val) {
				this.valText = val
			},
			
			addProp() {
				this.show1 = true
				this.init = 1
				this.userId = ''
				this.titlName = ''
				this.xiangzhen_id = ''
				this.xiangz_name = ''
			},

			addText() {
				var val
				const j = this.valText[3]
				for (let var1 in j) {
					this.xiangzhen_id = var1
					this.xiangz_name = j[var1]
				}
				this.addName()
				this.show1 = false
			},

			// user/set_agent   添加店铺     dianpu_name  店铺名称  user_id=用户ID
			// xiangzhen_id=乡镇ID  xiangz_name=乡镇名称
			addName() {
				if (this.init == 1) {
					this.$api('user.setAgent', {
						dianpu_name: this.titlName,
						xiangz_name: this.xiangz_name,
						user_id: this.userId,
						xiangzhen_id: this.xiangzhen_id
					}).then(res => {
						if (res.code === 1) {
							this.$tools.toast(res.msg);
							this.page = 1
							this.list.length = 0
							this.getAddressInfo()
						}
					});
				} else {
					this.init = 1
					this.$api('user.agent', {
						id: this.shoppId,
						dianpu_name: this.titlName,
						xiangz_name: this.xiangz_name,
						user_id: this.userId,
						xiangzhen_id: this.xiangzhen_id
					}).then(res => {
						if (res.code === 1) {
							this.$tools.toast('修改成功');
							this.getAddressInfo()
						}
					});
				}
			},


			blurInput(val) {
				this.userId = val.detail.value
			},

			blurName(val) {
				this.titlName = val.detail.value
			}


		}
	};
</script>


<style lang="scss" scoped>
	.set-shopp {
		padding-bottom: 140rpx;

		.item {
			display: flex;
			padding: 20rpx;
			margin-top: 5rpx;
			background-color: #EEEEEE;
		}

		image {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 12rpx;
		}

		.title {
			text-align: left;
			font-size: 28rpx;
			color: $u-content-color;
			margin-top: 20rpx;
		}
	}

	.add {
		position: fixed;
		left: 50%;
		bottom: 1%;
		transform: translateX(-50%);
		width: 90%;
		height: 80rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin: 10rpx auto;
		border-radius: 40rpx;
		background-color: #0081FF;
	}

	.foot_box1 {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 10rpx auto 30rpx;
		color: #FFFFFF;
		border-radius: 40rpx;
		background-color: #18B566;
	}
</style>
